﻿<template>
    <el-col :sm="24" :md="pzoption.mdwidth">
        <i class="iconfont icon-shezhi pull-right widgetset hidden-print" @click.stop="dialogInputVisible = true"></i>
        <i class="iconfont icon-shanchu pull-right widgetdel hidden-print" @click.stop="delWid(pzoption.wigdetcode)"></i>
        <el-form-item :label="pzoption.title">

            <el-select v-model="pzoption.value" style="width:100%" v-if="!childpro.multiple" filterable clearable>
                <el-option v-for="item in pzoption.dataset"
                           :key="item.value"
                           :label="item.label"
                           :value="item.value">
                </el-option>
            </el-select>
            <el-select v-model="childpro.mvalue" style="width:100%" v-if="childpro.multiple" multiple filterable clearable>
                <el-option v-for="item in pzoption.dataset"
                           :key="item.value"
                           :label="item.label"
                           :value="item.value">
                </el-option>
            </el-select>
        </el-form-item>
        <el-dialog title="组件属性" :visible.sync="dialogInputVisible" width="40%">
            <el-form-item label="是否多选">
                <el-switch v-model="childpro.multiple" size="mini" style="width:100%">
                </el-switch>
            </el-form-item>
            <el-tabs type="border-card">
                <el-tab-pane label="数据配置" style="min-height: 420px;">
                    <!--<el-radio v-model="childpro.datatype" label="0" style="display: block;">自定义数据项</el-radio>-->
                    <!--<el-radio v-model="childpro.datatype" label="1" style="display: block;margin-left: 0;margin-top:5px">动态数据项</el-radio>-->
                    <div class="panel panel-default" style="border: 1px solid #ddd;margin-top:10px" v-if="childpro.datatype === '0'">
                        <div class="panel-body">
                            <el-table :data=" pzoption.dataset" style="width: 100%">
                                <el-table-column prop="label"
                                                 label="显示值"
                                                 width="180">
                                    <template slot-scope="scope">
                                        <el-input v-model="scope.row.label"></el-input>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="value" label="值">
                                    <template slot-scope="scope">
                                        <el-input v-model="scope.row.value"></el-input>
                                    </template>
                                </el-table-column>
                                <el-table-column label="操作"  align="center" width="100">
                                    <template slot-scope="scope">
                                        <el-button @click.native.prevent="delRow(scope.$index,childpro.dataset)"
                                                   type="text"
                                                   size="small">
                                            删除
                                        </el-button>
                                    </template>
                                </el-table-column>
                            </el-table>
                            <el-button type="primary" size="mini" class="mt10 pull-right" @click="addRow">添加行<i class="el-icon-plus"></i></el-button>

                        </div>
                    </div>
                    <div class="panel panel-default" style="border: 1px solid #ddd;margin-top:10px" v-if="childpro.datatype === '1'">
                        <div class="panel-heading">动态SQL语句</div>
                        <div class="panel-body">

                        </div>
                    </div>

                </el-tab-pane>

            </el-tabs>
        </el-dialog>
    </el-col>

</template>
<script>
    module.exports = {
        props: ['pzoption', 'index'],
        data: function () {
            return {
                dialogInputVisible: false,
                childpro: {
                    placeholder: "请选择",
                    itemtype: "text",
                    mvalue: [],
                    datatype: "0",
                    datasql: "",
                    multiple: false
                }
            }
        },
        methods: {
            delWid: function (wigdetcode) {
                // 子组件中触发父组件方法ee并传值cc12345
                this.$root.nowwidget = {};
                _.remove(this.$root.FormData.wigetitems, function (obj) {
                    return obj.wigdetcode == wigdetcode;
                });
            },
            senddata: function () {
                this.$emit('data-change', JSON.stringify(this.childpro));
            },
            addRow: function () {
                var chi = this;
                var temp = { label: "标签", value: "值" + this.pzoption.dataset.length };
                this.pzoption.dataset.push(temp);

            },
            delRow: function (index, rows) {
                rows.splice(index, 1);
            }
        },
        mounted: function () {
            var chi = this;
            chi.$nextTick(function () {
                if (chi.$root.addchildwig) {
                    chi.$root.addchildwig();//不能缺少
                }
                if (chi.pzoption.childpro.placeholder) {
                    chi.childpro = chi.pzoption.childpro;
                } else {
                    chi.senddata();
                    chi.pzoption.dataset = [
                        { 'label': '全部', 'value': '' },
                        { 'label': '二月', 'value': '2' },
                        { 'label': '三月', 'value': '3' }
                    ]
                }

            })

        },
        watch: {
            childpro: { //深度监听，可监听到对象、数组的变化
                handler(newV, oldV) {
                    this.senddata();
                },
                deep: true
            },
            'childpro.mvalue': { //深度监听，可监听到对象、数组的变化
                handler(newV, oldV) {
                    if (newV) {
                        this.pzoption.value = newV.join();
                    }
                    console.debug(newV)
                },
                deep: true
            }
        }
    };
</script>